<template>
  <div>
    <div class="search">
      <div class="navigation">
    <div class="fr" style="margin-top: 4px;margin-right: 20px;">
        <span style="margin-right: 20px;">产品类型</span>
        <Select v-model="productType" @on-change="tabeList"
                style="width:200px" placeholder="请选择产品类型">
          <Option v-for="item in productTypeList" :value="item.proTypeId" :key="item.proTypeId">{{ item.proTypeName }}</Option>
        </Select>
      </div>
      <div class="fr" style="margin-top: 4px;margin-right: 20px;">
        <span style="margin-right: 20px;">销售渠道</span>
        <Select v-model="saleChannel" @on-change="tabeList"
                style="width:200px" placeholder="请选择销售渠道">
          <Option v-for="item in channelList" :value="item.itemNo" :key="item.itemNo">{{ item.itemName }}</Option>
        </Select>
      </div>
      <div class="fr" style="margin-top: 4px;margin-right: 20px;">
        <span style="margin-right: 20px;">产品状态</span>
        <Select v-model="productStatue" @on-change="tabeList"
                style="width:200px" placeholder="请选择产品状态">
          <Option v-for="item in productStatueList" :value="item.proTypeId" :key="item.proTypeId">{{ item.proTypeName }}</Option>
        </Select>
      </div>

      <div class="fr">
        <Input v-model="searchScene" placeholder="请输入产品代码查询"
               style="width:240px"><Button slot="append" icon="ios-search" @click="tabeList"></Button></Input>
        </div>
       </div>
      <Modal
        v-model="addModal"
        title="查看/编辑产品"
        @on-cancel="cancel">
        <newProductManage v-on:refreshbizlines="tabeList" ref="guestForm"></newProductManage>
        <div slot="footer">

        </div>
      </Modal>

  </div>
    <Table border :columns="columns" :data="dataList"></Table>
    <Page :total="pageList.length" size="small"
          :current="pageNum" :pageSize="pageSize"
          @on-change="pageNumChange" @on-page-size-change="pageSizeChange"
          show-total show-elevator show-sizer></Page>
  </div>
</template>

<script>
import axios from "axios"
  import {PRODCTYPES,CHANNEL,STATUE} from '../../utils/common'
  import newProductManage from './newProductManage.vue'
  export default{
    data: function () {
      return {
        
        pageNum:1,
        pageSize:10,
        pageList:[],
        addModal:false,
        channel:"",
        proStatus:'',
        productType:'',
        saleChannel:'',
        productStatue:'',
       productTypeList:PRODCTYPES,
       channels:'channels',
       channelList:[],
       productStatueList:STATUE,
      searchScene:'',
        columns: [
          {
            type: 'index',
            title:'序号',
            width:60,
            render(h,obj){
              //return obj.index-0+100
            },
          },
          {
            title: '产品代码',
            key: 'proId',
           
          },
          {
            title: "产品类型",
            key: 'proType',
           
          },
          {
            title: "产品名称",
            key: 'proName',
           
          },
          {
            title: '销售渠道',
            key: 'proChannels',
            width:170,
          },
          {
            title: "产品状态",
            key: 'proStatus',
           
          },
          {
            title: "数据接收日",
            key: 'dataDt',
            
          },
          {
            title: "产品到期日",
            key:'proEndDt',
            
          },
          {
            title: '操作',
            key: 'action',
            width: 146,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'edit'
                  },
                  style: {
                    marginRight: '15px',
                    fontSize:'16px',
                    cursor:'pointer'
                  },
                  on: {
                    click: () => {
                      this.showDetail(params.row)
                      // this.showDetail()
                    }
                  }
                }, 'View'),
              
              ]);
            }
          }
        ],
        dataList:[]
      }
    },
    components: {newProductManage},
    methods: {
      showModal(){
        this.addModal = true
        this.$refs.guestForm.resetAll()
      },
      cancel () {
        // debugger
          this.addModal= false;
          this.$refs.guestForm.resetAll()
        },
      pageNumChange(pageNum){
        this.pageNum = pageNum
        this.dataList = this.pageList.slice((this.pageNum-1)*this.pageSize,this.pageNum*this.pageSize)
         },
      pageSizeChange(pageSize){
        this.pageSize = pageSize
        this.dataList = this.pageList.slice((this.pageNum-1)*this.pageSize,this.pageNum*this.pageSize)
         },
       showDetail(row){
        this.api({
          url: "/product/detail",
          method: "post",
          params:{
            id:row.proId
          }
        }).then(data => {
         
          for(var k=0;k<this.productTypeList.length;k++){
             if(this.productTypeList[k].proTypeId==data.proType){
                data.proType=this.productTypeList[k].proTypeName
              }
        }
          let formData = {
            proType:data.proType,
            proId:data.proId,
            netDate:data.netDate,
            proExpire:data.proEndDt,
             dataDt: data.dataDt,
             proFix:data.updateTime,
             proName:data.proName,
             proRate:data.proRate,
             saleStartDt:data.saleStartDt,
             saleEndDt:data.saleEndDt,
             proStatus:data.proStatus,
             proChannels:data.proChannels,
             incomeType:data.incomeType,
             marketLable:data.marketLable,
             marketTips:data.marketTips,
             jumpTransactionCode:data.jumpTransactionCode
          }
          // console.log(data)
          this.addModal = true
          this.$refs.guestForm.getDetails(formData)
        })
      },
     
      //产品列表
      tabeList(){
        this.api({
        url: "/product/list",
        method: "post",
        params:{
            type:this.productType,
            proChannels:this.saleChannel,
            status:this.productStatue,
            proId:this.searchScene,
        }
      }).then(data => {
        this.pageList = data;
        // console.log(data)
        
        this.dataList = this.pageList.slice(0,this.pageSize);
        for(var i=0;i<this.pageList.length;i++){
              if(data[i].proStatus==0){
                data[i].proStatus="无效不可售"
              }else{
                data[i].proStatus="有效可售"
              }
        }
        for(var j=0;j<data.length;j++){
          for(var k=0;k<this.productTypeList.length;k++){
             if(this.productTypeList[k].proTypeId==data[j].proType){
                data[j].proType=this.productTypeList[k].proTypeName
              }
        }}

        for(var m=0;m<data.length;m++){//列表数据
         let  channels=""
         for(var n=0;n<this.channelList.length;n++){//销售渠道数据
             for(var j=0;j<data[m].proChannels.split('').length;j++){//获取到的data.proChannerls:13,
           if(this.channelList[n].itemNo==data[m].proChannels.split('')[j]){
              //  console.log(data[m].proChannels.split('')[j])
               channels+=this.channelList[n].itemName+','
               
              // console.log(channels)
            }
             }
          }
          
         data[m].proChannels=channels.slice(0,channels.length-1);
        
        }
 }
        )
      }

     
    },
    created(){
     
      //销售渠道
       this.api({
        url: "/product/attr/item/list",
        method: "post",
        params:{
            attrId:this.channels
          }
      }).then(data => {
        this.channelList = data;
        // console.log(data)
      }),
       //产品列表
      this.tabeList()
},

    
    mounted() {


    }
  }
</script>

<style lang="scss" scoped>
  .search {
    height: 60px;
    .navigation{
      display:flex;
      flex-direction: row;
      justify-content: space-around;
    }
  }
  .ivu-input-wrapper {
    margin-top: 4px;
  }

  .ivu-icon-ios-search {
    font-size: 20px;
    color: #FFFFFF;
  }
  .fr {
    float: left;
    margin-right: 20px;
  }

  .ivu-icon.ivu-icon-help-circled{
    left: 10px;
  }
  .ivu-poptip-confirm .ivu-poptip-footer{
    padding: 8px;
    text-align: center;
  }
  .ivu-poptip-confirm .ivu-poptip-body {
    padding: 8px;
  }
  .ivu-poptip-content {
    margin-right: 20px;
  }

</style>
